<template>
    <div class="house">
      <div class="search">
        楼宇名称：
        <el-input
          style="width: 145px; padding-right:10px"
          placeholder="请输入楼宇名称"
          prefix-icon="el-icon-search"
          v-model="searchData.buildingName">
        </el-input>
  
        小区单元：
        <el-input
          style="width: 145px;"
          placeholder="请输入小区单元"
          prefix-icon="el-icon-search"
          v-model="searchData.unit">
        </el-input>
  
        <el-button style=" float: right; margin-left:10px;" @click="reset">重置</el-button>
        <el-button style=" float: right;" type="primary" @click="onSubmit">查询</el-button>
      </div>
  
      <div class="do" v-if="user.position === 2">
        <el-button style="margin-left:10px;" @click="dialogFormVisible = true">新增</el-button>
        <el-button @click="batchDelete()">批量删除</el-button>
      </div>
  
      <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      stripe
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="title"
        label="投诉标题">
      </el-table-column>
      <el-table-column
        prop="content"
        label="投诉内容">
      </el-table-column>
      <el-table-column
        prop="reporterName"
        label="投诉人"
        >
      </el-table-column>
      <el-table-column
        prop="complaintType"
        label="投诉类型"
        :filters="[{ text: '公共设施', value: 0 }, { text: '环境卫生', value: 1 }, { text: '噪音扰民', value: 2}, { text: '安全问题', value: 3 }, { text: '服务质量', value: 4 }, { text: '其他', value: 5 }]"
        :filter-method="filterTag1"
        filter-placement="bottom-end">
        <template slot-scope="scope">
            <el-tag
            :type="scope.row.status === 0 ? 'primary' : 'success'"
            disable-transitions>{{getComplaintType(scope.row.complaintType)}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        :filters="[{ text: '待处理', value: 0 }, { text: '处理中', value: 1 }, { text: '已处理', value: 2}, { text: '已关闭', value: 3 }]"
        :filter-method="filterTag"
        filter-placement="bottom-end">
        <template slot-scope="scope">
            <el-tag
            :type="scope.row.status === 0 ? 'primary' : 'success'"
            disable-transitions>{{getStatusText(scope.row.status)}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="processUsername"
        label="处理人"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column v-if="user.position === 1 || user.position === 2" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            v-if="user.position === 2"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
      </el-table>
  
      <div class="block" style="margin-top: 20px; text-align: right; margin-right: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
  
      <ComplaintFormPop class="houseFormPop" :user="user" @updateFormData="updateFormData" :formData="updateTableData" v-show="dialogFormVisible" :visible.sync="dialogFormVisible"></ComplaintFormPop>
    </div>
  </template>
  
  <script>
  import api from '@/api';
  import ComplaintFormPop from './ComplaintFormPop.vue';
  import { mapState,mapMutations } from "vuex"
  
  export default {
    computed:{
        ...mapState("login",["user"])
      },
      components: {
        ComplaintFormPop,
      },
      data() {
        return {
          title: '新增楼宇',
          currentPage: 1,
          total:100,
          pageSize:10,
          dialogFormVisible: false,
          searchData:{
            buildingName: '',
            unit:'',
            pageNow: 1,
          },
          tableData: [{
            title: '投诉标题',
            content: '投诉内容',
            complaintType:0,
            reporterId:'',
            reporterName:'投诉人',
            images:'',
            status:0,
            processResult: '处理结果',
            processUserId:'',
            processUsername:'处理人',
            statisFaction:"满意度",
            feedback:"投诉反馈"
          }],
          selectedRow:[],
          updateTableData:{
            title: '',
            content: '',
            complaintType:0,
            reporterId:'',
            reporterName:'',
            images:'',
            status:0,
            processResult: '',
            processUserId:'',
            processUsername:'',
            statisFaction:"",
            feedback:""
          }
        }
      },
      methods: {
        filterTag(value, row) {
          return row.status === value;
        },

        filterTag1(value, row) {
          return row.complaintType === value;
        },

        getStatusText(sex){
            switch(sex){
                case 0 : return '待处理';
                case 1 : return '处理中';
                case 2 : return '已处理';
                case 3 : return '已关闭';
            default : return '';
            }
        },

        getComplaintType(sex){
            switch(sex){
                case 0 : return '公共设施';
                case 1 : return '环境卫生';
                case 2 : return '噪音扰民';
                case 3 : return '安全问题';
                case 4 : return '服务质量';
                case 5 : return '其他';
            default : return '';
            }
        },

        updateFormData(data){
          this.updateTableData = data;
        },
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
           this.searchData.pageNow = val
           //获取楼宇信息
           this.onSubmit();
        },
        handleSelectionChange(selection) {
            this.selectedRow = selection
        },
        handleEdit(index, row) {
          this.updateTableData = row;
          this.dialogFormVisible = true;
        },
        handleDelete(index, row) {
          api.buildDelete(row.id).then(res =>{
              if(res.type === 'error'){
                  this.$message.error(res.message)
              }else if(res.data.code === 200){
                this.$message.success('删除成功');
                this.tableData.splice(index,1)
              }else{
                this.$message.error(res.data.message)
              }
          })
        },
        //批量删除
        batchDelete(){
          var deleteIds = '';
            this.selectedRow.map(item =>{
              if(deleteIds === ''){
                deleteIds = item.id
              }else{
                deleteIds = deleteIds + "," + item.id
              }
            })
            if(deleteIds === ''){
              this.$message.error("请勾选删除项")
              return;
            }
          api.buildDelete(deleteIds).then(res =>{
              if(res.type === 'error'){
                  this.$message.error(res.message)
              }else if(res.data.code === 200){
                console.log('删除成功');
                this.selectedRow.map(item =>{
                    const index = this.tableData.findIndex((data) => data.id === item.id);
                    this.tableData.splice(index,1)
                })
              }else{
                this.$message.error(res.data.message)
              }
          })
        },
        onSubmit() {
          //获取楼宇信息
          api.buildList(this.searchData).then(res =>{
              if(res.type === 'error'){
                  this.$message.error(res.message)
              }else if(res.data.code === 200){
                this.tableData = res.data.data.buildInfos
                this.total = res.data.data.total
              }else{
                this.$message.error(res.data.message)
              }
          })
        },
        // 重置
        reset(){
          this.searchData.buildingName = '',
          this.searchData.unit = '',
          this.onSubmit();
        }
      },
      created () {
        //获取楼宇信息
        // this.onSubmit();
      },
  }
  </script>
  <style scoped>
  .house{
    background-color: #fff;
  }
  .house .search{
    padding: 10px;
  }
  .house .do{
    padding: 10px;
  }
  /* 自定义遮罩层样式 */
  .house .houseFormPop {
    background-color: rgba(0, 0, 0, 0.5); /* 遮罩层颜色 */
    z-index: 9999; /* 设置一个较高的 z-index 使遮罩层位于最上层 */
  }
  </style>